<template>
<div style="background-color: #e6e6e5;padding: 10px 20px;height: 6vh">
  <span style="line-height: 60px;font-size:20px; background-color: yellow">用户管理</span>
  <el-button type="primary" style="float: right;margin-top: 10px" @click="beforeAddUser">新建用户</el-button>
</div>
<!--  新建用户弹窗-->
  <el-dialog  v-model="dialogVisible" :title="dialogTitle"
  style="width: 1000px;" :before-close="handleClose">
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username" :disabled="saveUserForm.id !=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"></el-input>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12"> <el-form-item label="邮箱"><el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input></el-form-item></el-col>
        <el-col :span="12"> <el-form-item label="年龄"><el-input placeholder="请输入年龄" v-model="saveUserForm.age"></el-input></el-form-item></el-col>

      </el-row>
      <el-row :gutter="10">

        <el-col :span="6"><el-form-item label="职级"><el-select placeholder="请选择" v-model="saveUserForm.level"  @change="loadLeader">
          <el-option v-for="item in levelOptions"  :label="item.label"  :value="item.value"></el-option>
        </el-select></el-form-item></el-col>
        <el-col :span="6"><el-form-item label="直属领导"><el-select placeholder="请选择" v-model="saveUserForm.parentId">
          <el-option v-for="item in leaderOptions" :label="item.username" :value="item.id"></el-option>
        </el-select></el-form-item></el-col>
        <el-col :span="4"><el-form-item label="性别" ><el-radio-group v-model="saveUserForm.gender">
          <el-radio border label="男" value="1" style="margin: 0"></el-radio>
          <el-radio border label="女" value="0" ></el-radio>
        </el-radio-group></el-form-item></el-col>
        <el-col :span="6"><el-form-item label="用户状态" ><el-radio-group v-model="saveUserForm.status">
          <el-radio border label="启用" value="1" style="margin: 0"></el-radio>
          <el-radio border label="禁用" value="0" ></el-radio>
        </el-radio-group></el-form-item></el-col>

      </el-row>

    </el-form>
    <template #footer>
      <el-button @click="handleClose" >取消</el-button>
      <el-button type="primary" @click="saveUser" >保存</el-button>
    </template>

  </el-dialog>




<!--  用户搜索卡片-->
  <el-card style="margin: 20px ;height: 70px ">
    <el-form :inline="true">
      <el-form-item label="用户搜索"  style="width: 220px">
        <el-input placeholder="输入用户名" v-model="searchUserForm.username" @keydown.enter="loadUser"> </el-input>
      </el-form-item>
      <el-form-item label="用户状态" style="width: 220px">
        <el-select placeholder="请选择用户状态" v-model="searchUserForm.status">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="loadUser">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

<!--  用户展示卡片-->
  <el-card style="margin: 20px">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" align="center" width="80" ></el-table-column>
      <el-table-column prop="username" label="用户名" align="center"  ></el-table-column>
      <el-table-column prop="phone" label="手机号" align="center"  ></el-table-column>
      <el-table-column prop="createTime" label="加入时间" align="center"  ></el-table-column>
      <el-table-column prop="status" label="用户状态" align="center"  >
        <template #default="scope">
          <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" @change="changeStatus2(scope.row.id,scope.row.status)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column  label="操作" align="center"  >
        <template #default="scope" >
          <el-button link type="primary" @click="resetPassword2(scope.row.id)">重置密码</el-button>
          <el-button link type="primary" @click="editUser2(scope.row.id)">编辑</el-button>
          <el-button link type="primary"  @click="deleteUser2(scope.row.id)">删除</el-button>

        </template>
      </el-table-column>

    </el-table>

  </el-card>




</template>
<script setup>


import {onMounted, ref} from "vue";
import  qs from  "qs";
import axios   from "axios";
import {ElMessage} from "element-plus";

const dialogVisible=ref(false);
const dialogTitle=ref('');
const beforeAddUser=()=>{
  dialogVisible.value=true;
  dialogTitle.value='新建用户';

};
// 收集数据保存表单员工数据
const saveUserForm = ref({
  username:'',
  phone:'',
  email:'',
  age:'',
  level:'',
  parentId:'',
  gender:'',
  status:'',
});

const levelOptions=ref([
  {label:'员工',value:'10'},
  {label:'经理',value:'20'},
  {label:'总监',value:'30'},
  {label:'总裁',value:'40'},
]);
// 直属领导
const  leaderOptions=ref([]);
const loadLeader=()=>{
  leaderOptions.value=[];
  saveUserForm.value.parentId='';
  let level=parseInt(saveUserForm.value.level)+10;
  console.log('领导',level);
  axios.get(BASE_URL+'/v1/user/select2?level='+level)
      .then((response)=>{
        if (response.data.code==2000){
          leaderOptions.value=response.data.data;
        }else {
          ElMessage.error(response.data.msg);
        }
      })
};

// 定义保存用户信息方法
const saveUser=()=>{
  console.log(saveUserForm.value)
  let data=qs.stringify(saveUserForm.value);
  axios.post(BASE_URL+'/v1/user/save2',data)
      .then((response)=>{
        if(response.data.code==2000){
          ElMessage.success('保存成功');
          loadUser();
          saveUserForm.value={ username:'',
            phone:'',
            email:'',
            age:'',
            level:'',
            parentId:'',
            gender:'',
            status:'',};
          dialogVisible.value=false;
        }else {
          ElMessage.error(response.data.msg);
        }
      });


};
// 取消保存用户信息
const handleClose=()=>{
  if (confirm('您确认关闭弹窗吗？')) {
    dialogVisible.value = false;
    saveUserForm.value = {
      username: '',
      phone: '',
      email: '',
      age: '',
      level: '',
      parentId: '',
      gender: '',
      status: '',
    }
  }
};

// 定义保存查询对象的数组
const userArr=ref([]);
//定义查询条件对象
const searchUserForm=ref({
  username:'',
  status:'',
});

const loadUser=()=>{
  let data=qs.stringify(searchUserForm.value);
  axios.get(BASE_URL+'/v1/user/select2?'+data)
      .then((response)=>{
        if (response.data.code==2000){
          userArr.value=response.data.data;
          console.log(userArr.value)
        }else {
          ElMessage.error(response.data.msg);
        }
      });


};

onMounted(()=>{
  loadUser();
})

const reset=()=>{
  searchUserForm.value={};
  loadUser();
};


//改变员工状态
const changeStatus2=(userId,status)=>{
  axios.post(BASE_URL+'/v1/user/update/status2/'+userId+'/'+status)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('修改状态成功');

        }else {
          ElMessage.error(response.data.msg);
        }
      })
};

//删除用户

const deleteUser2=(id)=>{
  if (confirm('您确认删除该员工吗？')){
    axios.post(BASE_URL+'/v1/user/delete/'+id)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success('删除成功');
            loadUser();

          }else {
            ElMessage.error(response.data.msg);
          }
        })
  }

};

//编辑用户
const editUser2=(id)=>{
  dialogVisible.value=true;
  dialogTitle.value='编辑用户';
  axios.get(BASE_URL+'/v1/user/select2?id='+id)
      .then((response)=> {
        if (response.data.code == 2000) {
          saveUserForm.value = response.data.data[0];
          let level=parseInt(saveUserForm.value.level)+10;
          axios.get(BASE_URL+'/v1/user/select2?level='+level)
              .then((response)=>{
                if (response.data.code==2000){
                  leaderOptions.value=response.data.data;
                }else {
                  ElMessage.error(response.data.msg);
                }
              })

        } else {
          ElMessage.error(response.data.msg);
        }
      })
};

const resetPassword2=(id)=>{
  ElMessage.info('修改密码没写');
};




</script>

<style scoped>

</style>